Dez dicas para deixar sua visualização de dados mais acessível
Nem todo mundo enxerga as cores da mesma maneira e é preciso levar isso em conta na hora de criar gráficos, tabelas e mapas.
Nem todo mundo enxerga as cores da mesma maneira e é preciso levar isso em conta na hora de criar visualizações de dados, como gráficos, tabelas e mapas. Um motivo são os diferentes tipos de daltonismo, dificuldade em distinguir cores que pode se apresentar em um a cada 12 homens (8%) e uma a cada 200 mulheres (0,5%).
As cores também variam de acordo com o modo de acesso, que pode um leitor digital de livros em preto e branco, uma tela de computador com configuração de cor alterada, ou mesmo uma impressão em preto e branco ou de má qualidade. Por isso, é importante buscar estratégias que facilitem o entendimento de nossas visualizações de dados, independentemente das cores utilizadas.
Confira a seguir dez dicas para deixar sua visualização de dados mais acessível.
1. Faça legendas diretas
Em gráficos, costumamos distinguir séries por meio de cores e legenda à parte. Porém, quando fazemos isso, as informações podem se perder para pessoas daltônicas ou para quem acessa em preto e branco.
Com legendas diretas, conseguimos perceber as informações independentemente das cores.
2. Use espaços em branco
Mesmo com legendas diretas, nem sempre é possível perceber a diferença entre as séries de um gráfico.
Podemos incluir espaços em branco entre as séries para facilitar a distinção.
3. Varie traços e use formas em gráficos de linha
Usamos gráficos de linha para mostrar a variação de séries ao longo do tempo. Se distinguimos as séries apenas por cor, as informações podem se perder.
Podemos variar os traços e usar formas para facilitar a distinção.
4. Use formas em gráficos de dispersão
Gráficos de dispersão são usados para mostrar a relação entre variáveis.
Se distinguimos as séries apenas por cor, as informações podem se perder.
Podemos usar formas para facilitar a distinção.
5. Use símbolos em tabelas
As tabelas são usadas para mostrar informações detalhadas.
Se usamos apenas cores, as informações podem se perder.
Quando usamos símbolos em tabelas, conseguimos perceber as informações independentemente das cores.
6. Use padrões e texturas em gráficos e mapas
Um alternativa às cores pode ser o uso de texturas e padrões, como listras de diferentes posições. Veja este exemplo que adaptei do blog Chartable, do Datawrapper: sem padrão, a diferença de cores entre as regiões se perde.
Quanto usamos padrões, conseguimos perceber melhor as informações, independentemente das cores.
7. Use gráficos de barras e de colunas
Geralmente um bom gráfico de barras ou de colunas substitui outros gráficos sem precisar de cores e legendas.
No caso dos gráficos que abordamos nas dicas anteriores:
- O gráfico de pizza pode ser um gráfico de barras. A ligeira diferença de porcentagem entre cada categoria fica mais nítida pela ordenação das categorias (B-C-A) e pelo tamanho das barras, mesmo sem cores.
- O gráfico de linhas pode ser substituído por um conjunto de gráficos de colunas, um para cada categoria. Fica mais fácil visualizar a evolução de cada categoria especificamente. Também é possível comparar as categorias lado a lado, mesmo sem cores.
- O gráfico de dispersão pode ser substituído por um gráfico de colunas. Fica mais fácil visualizar a posição de A, B, C em cada variável, mesmo sem cores.
8. Use paletas com cores contrastantes
Essa é a dica mais famosa em relação a acessibilidade em visualização de dados. Deixei por último para destacar que, muitas vezes, a cor não é imprescindível.
Usamos e continuaremos usando cores em nossas visualizações. Para isso, é importante escolher cores que tenham contraste suficiente para o máximo possível de pessoas.
Em geral, devemos evitar combinações entre:
- Vermelho & Verde
- Verde & Marrom
- Verde & Azul
- Azul & Cinza
- Azul & Roxo
- Verde & Cinza
- Verde & Preto
Com base na famosa proposta original de Masataka Okabe e Kei Ito, Lisa Charlotte Rost propõe uma paleta otimizada que funciona para os principais tipos de daltonismo:
Algumas ferramentas on-line ajudam a escolher cores com contraste adequado:
9. Use um simulador de condições visuais
Há muitas ferramentas disponíveis na internet que simulam condições visuais. Eu costumo usar a extensão NoCoffee no navegador Google Chrome, que é bastante simples e completa: basta escolher o tipo de condição visual para que as páginas da internet simulem a condição escolhida.
Outras opções de simuladores de problemas de visão:
- Coblis: fazemos upload de uma imagem e simulamos como pessoas com diferentes tipos de daltonismo a enxergam.
- IamcalColor Vision: escolhemos cores de texto e fundo e simulamos como pessoas com diferentes tipos de daltonismo enxergam a combinação das cores escolhidas.
10. Descreva seus gráficos, tabelas e mapas
Redigir um parágrafo que sintetize a informação principal de cada visualização de dados é algo muito poderoso para a acessibilidade, pois:
- Deixa nossas visualizações acessíveis para pessoas cegas ou com baixa visão que usam softwares que leem os textos “por trás” de cada elemento visual.
- Ajuda pessoas que não estão acostumadas a interpretar gráficos, tabelas ou mapas.
Em geral, podemos considerar quatro passos para descrever gráficos, conforme propõe Amy Cesal:
- Tipo de gráfico
- Tipo de dado
- Propósito do gráfico
- Dados na íntegra
Confira um exemplo de como descrever o gráfico a seguir.
- Tipo de gráfico: Barras
- Tipo de dado: Percentual dos tributos na arrecadação no Brasil
- Propósito do gráfico: Mostrar que cinco tributos concentram 71% da arrecadação no Brasil
- Dados na íntegra: ICMS (21%), IR (18), Cofins (16), Contra. à previdência (11), Contra. ao FGTS (5). Fonte: Receita Federal, “Carga Tributária no Brasil 2018”. Autoria: Insper.
Ficaria assim:
Gráfico de barras que mostra o percentual dos tributos na arrecadação no Brasil. Cinco deles concentram 71% da arrecadação: ICMS (21%), IR (18), Cofins (16), Contra. à previdência (11), Contra. ao FGTS (5). Fonte: Receita Federal, “Carga Tributária no Brasil 2018”. Autoria: Insper.
Perceba que a mensagem principal do gráfico (cinco tributos concentram 71% da arrecadação no Brasil) aparece não apenas no texto alternativo, mas aparece visível e em destaque no próprio gráfico, guiando a interpretação de todas as pessoas.
Referências & Saiba Mais
Além do conhecimento prático, recorri a diferentes materiais para elaborar essas dez dicas. Confira:
A) What to consider when visualizing data for colorbling readers
A série em três partes publicada no blog Chartable (Datawrapper) é bastante prática e interessante. Um dos materiais mais completos que achei:
B) 5 tips on designing colorblind-friendly visualizations
Esse artigo publicado no blog do Tableau traz cinco dicas de visualizações amigáveis para daltônicos. É especialmente útil para quem não quer deixar de usar vermelho e verde juntos:
- Vermelho e verde podem ser usados juntos;
- Não é só questão de vermelho e verde;
- Use paletas de cores com contraste adequado;
- Se precisa usar vermelho-verde, use contraste claro-escuro;
- Se precisa usar vermelho-verde, use outros meios de distinção.
C) How to Use Color Blind Friendly Palettes to Make Your Charts Accessible
Este material da Venngage é uma ótima introdução ao daltonismo para quem trabalha com design. Explica em detalhes o que é o daltonismo, com exemplos visuais bem didáticos. Revisa a importância das cores nas visualizações de dados. E traz dicas práticas, resumidas a seguir:
- Use paletas de cor amigáveis
- Evite combinações de cores problemáticas
- Use texturas e padrões
- Use símbolos e ícones
- Use cores contrastantes
- Seja minimalista.
D) Two Simple Steps to Create Colorblind-Friendly Data Visualizations
Este artigo do Towards Data Science vai na linha dos outros materiais e destaca-se pelo poder de síntese, pois resume das boas práticas em dois aspectos:
- Escolha as cores certas;
- Use diferentes formas, padrões, texturas e legendas.
E) Como escrever textos alternativos de gráficos
Visualizações de dados também podem ser acessíveis para pessoas cegas ou com baixa visão, por meio de textos alternativos. Neste artigo publicado no blog Nightingale (traduzido para o português), Amy Cesal resume quatro passos para descrever gráficos:
- Tipo de gráfico
- Tipo de dado
- Propósito do gráfico
- Dados na íntegra